<template>
  <lay-container fluid="true" class="menu-box" >
    <div class="table-box" >
      <lay-table ref="menuTableRef"
                 children-column-name="children"
                 :columns="columns"
                 :data-source="dataSource"
                 :default-toolbar="true"
                 :default-expand-all="defaultExpandAll"
                 :height="'100%'"
                 :expand-index="0">
        <template #toolbar>
          <lay-button size="sm" type="primary" @click="toAddMenuDom">
            <lay-icon class="layui-icon-addition"></lay-icon>
            新增一级菜单
          </lay-button>
          <lay-button size="sm" @click="expandAll">{{ defaultExpandAll ? '收起全部':'全部展开'}}</lay-button>
        </template>

        <!-- 列插槽-start -->

        <template #menuName="{ row }">
          <lay-icon :class="row.menuIcon"></lay-icon> &nbsp;&nbsp;
          {{ row.menuName }}
        </template>
        <template v-slot:status="{ row }">
          <lay-switch v-model="row.status"
                      onswitch-value="on" unswitch-value="off"
                      onswitch-text="启用"  unswitch-text="禁用"
                      @change="status =>changeStatus(row,status)">
          </lay-switch>
        </template>
        <template #menuType="{ row }">
          <div v-show="row.menuType == 'd'">
            <lay-tag color="#165DFF" variant="light">目录</lay-tag>
          </div>
          <div v-show="row.menuType == 'm'">
            <lay-tag color="#2dc570" variant="light">菜单</lay-tag>
          </div>
          <div v-show="row.menuType == 'l'">
            <lay-tag color="#F5319D" variant="light">外链</lay-tag>
          </div>
          <div v-show="row.menuType == 'b'">
            <lay-tag color="#393D49" variant="light">按钮</lay-tag>
          </div>
        </template>
        <!-- 列插槽-end -->

        <template v-slot:operator="{ row }">
          <lay-button
              size="xs"
              border="green"
              v-if="!isButton(row.menuType)"
              border-style="dashed"
              @click="toAddSubMenuDom(row)">
            新增
          </lay-button>

          <lay-button
              size="xs"
              border="green"
              border-style="dashed"
              @click="toEditMenuDom(row.id)">
            编辑
          </lay-button>

          <lay-popconfirm
              content="确定要删除此用户?"
              trigger="click"
              @confirm="toRemoveMenuDom(row.id)">
            <lay-button size="xs" border="red" border-style="dashed">删除</lay-button>
          </lay-popconfirm>
        </template>
      </lay-table>
    </div>

    <!-- 外部组件 -->
    <add ref="addRef" title="新增一级菜单" @refreshParent="selectAllMenu"></add>
    <edit ref="editRef" title="编辑菜单" @refreshParent="selectAllMenu" :id="p_id"></edit>
    <addSub ref="addSubRef" title="新增子菜单" :parent-menu-code="p_parentMenuCode" :parent-menu-name="p_parentMenuName" @refreshParent="selectAllMenu"></addSub>
  </lay-container>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {removeMenu, selectAllSysMenuTree, statusMenu} from '@/api/module/menu'
import add from "@/views/sys/menu/add.vue";
import edit from "@/views/sys/menu/edit.vue";
import addSub from "@/views/sys/menu/addSub.vue";
import {isButton,statusBool,statusString} from "@/library/objectUtil";


const menuTableRef = ref();
const dataSource = ref();
const defaultExpandAll = ref(false);

const columns = [
  { title:"菜单名", width:"180px",customSlot:'menuName', key:"menuName" },
  { title:"菜单代码", width:"150px", key:"menuCode" },
  { title:"类型", width:"100px", key:"menuType",customSlot: 'menuType' },
  { title:"状态", width:"100px", key:"status",customSlot: 'status' },
  { title:"路由", key:"routeUrl" },
  { title:"组件", key:"" },
  { title:"排序", width:"80px", key:"sort" },
  { title: '操作', width: '180px', customSlot: 'operator', key: 'operator', fixed: 'right' }
]

onMounted(()=>{
  selectAllMenu();
})

const selectAllMenu = function (){
  selectAllSysMenuTree().then(res=>{
    dataSource.value = res.data;
  })
}

// 展开菜单
const expandAll = function() {
  defaultExpandAll.value = !defaultExpandAll.value;
}

// 删除菜单
function toRemoveMenuDom(id:Number) {
  removeMenu(id).then(res => {
    if (res.code == 200) {
      selectAllMenu();
    }
  })
}

// 新增一级菜单
const addRef = ref();
const toAddMenuDom = () => {
  addRef.value.changeVisible();
}

// 新增子菜单
const addSubRef = ref();
const p_parentMenuCode = ref<string>()
const p_parentMenuName = ref<string>()
const toAddSubMenuDom = function (row:any){
  p_parentMenuCode.value = row.menuCode;
  p_parentMenuName.value = row.menuName;
  addSubRef.value.changeVisible();
}

// 编辑菜单
const editRef = ref();
const p_id = ref<number>()
const toEditMenuDom = function (id:number){
  p_id.value = id;
  editRef.value.changeVisible();
}

// 切换状态
const statusMenuBo = ref({
  id:0,
  status: ''
});
const changeStatus = function (row:any,status:string) {
  statusMenuBo.value.id = row.id;
  statusMenuBo.value.status = status;

  const statusBak = row.status;
  statusMenu(statusMenuBo.value).then(res => {
    if (res.code == 200) {
      selectAllMenu();
    }else {
      row.status = statusBak;
    }
  })
};


</script>

<style scoped>
.menu-box {
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 810px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}
</style>